<template>
	<view class="">
		<view class="m-button" :style="{width:width+'rpx',height:height+'rpx',margin:margin}" @tap="tap_handle">

			<view class="btn_bg" :class="{disable:disable}">
				<image :src="'/static/index/btn_bg_left'+type+'.png'" class="left_bg" mode="heightFix"
					:style="{height:height+'rpx'}"></image>
				<image :src="'/static/index/btn_bg_center'+type+'.png'" mode="scaleToFill" class="center_bg"
					:style="{height:height+'rpx',width:current_width+'rpx'}"></image>
				<image :src="'/static/index/btn_bg_right'+type+'.png'" class="right_bg" mode="heightFix"
					:style="{height:height+'rpx'}"></image>
			</view>
			<view class="m-button-text" :class="{none_text:type == '1'}">
				<slot></slot>
			</view>
		</view>
	</view>
</template>
<script>
	import Tween from '@/store/tween.umd.js'

	export default {
		name: 'm-Button',
		props: {
			width: {
				type: String,
				default: '650'
			},
			height: {
				type: String,
				default: '109'
			},
			show_animate: {
				type: Boolean,
				default: true
			},
			margin: {
				type: String,
				default: '0'

			},
			disable: {
				type: Boolean,
				default: false
			},
			/**
			 * 不传为默认绿色北京 传1为空白背景
			 */
			type: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				current_width: 50
			}
		},
		watch: {

		},
		mounted() {
			this.animate()
		},
		created() {
			if (this.show_animate) {

				let width = parseInt(this.width);

				// let interval = setInterval(() => {
				// 	if (this.current_width < width) {
				// 		this.current_width += 10
				// 	} else {
				// 		this.current_width = width;
				// 		clearInterval(interval)
				// 	}
				// }, 10)
				let data = {
					width: this.current_width
				}
				let tween = new Tween.Tween(data)
					.to({
						width: this.width
					}, 400)
					.delay(500)
					.repeat(1)
					.easing(Tween.Easing.Quadratic.Out)
					.onUpdate(() => {
						this.current_width = data.width;
					})

				tween.start()
			} else {
				this.current_width = width;
			}
		},
		computed: {

		},
		methods: {
			animate: function() {
				// #ifdef APP

				setInterval(() => {
					Tween.update();
				}, 10)
				// #endif

				// #ifdef H5
				requestAnimationFrame(this.animate)
				Tween.update()
				// #endif
			},
			tap_handle: function() {
				this.$emit('onClick')
			}
		}
	}
</script>

<style>
	.left_bg {
		position: relative;
		z-index: 9;
		left: 1px;
	}

	.center_bg {
		position: relative;
		z-index: 8;
	}

	.right_bg {
		position: relative;
		z-index: 9;
		right: 2px;
	}

	.btn_bg {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 0;
		top: 4rpx;
	}

	.disable {
		filter: grayscale(100%);
	}

	.m-button-text {
		color: #FFFFFF;
		font-size: 32rpx;
		position: relative;
		z-index: 10;
		animation: showText .6s;
		animation-iteration-count: 1;
		animation-delay: 300ms;
		opacity: 0;
		transform: scale(.2);
		line-height: 1;
		animation-fill-mode: forwards
	}

	.none_text {
		color: #000;
	}

	@keyframes showText {
		from {
			opacity: 0;
			transform: scale(.2);
		}

		to {
			opacity: 1;
			transform: scale(1);
		}
	}

	.m-button {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
